    export default {
        name: "blogMain",
        setup(props) {
            const router = VueRouter.useRouter();
            const route = VueRouter.useRoute();
			const searchText = ref('')
			const currentPage = ref(1)
			const pageSize = ref(10)
			const total = ref(0)
			const articles = ref([])
			const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')) || {})

			// 生命周期钩子
			onMounted(() => {
				loadArticles()
			})

			// 加载公告数据
			const loadArticles = async () => {
			    const res = await getbloglist({
					gjc: searchText.value,
					page: currentPage.value,
					pageSize: pageSize.value
				});
				articles.value = res.items;
				total.value = res.total;
			}

			// 分页处理
			const handlePageChange = () => {
				loadArticles()
			}

			// 搜索处理
			const handleSearch = () => {
				currentPage.value = 1
				loadArticles()
			}

			// 清除搜索
			const clearSearch = () => {
				searchText.value = ''
				currentPage.value = 1
				loadArticles()
			}

			// 查看详情
			const viewArticle = (id) => {
				router.push({ name: 'blogview', params: { id: id } })
			}

			// 创建公告
			const handleCreate = () => {
				router.push({name: 'AdminAddBlog'});
			}
			
			// 修改公告
			const handleEdit = (row) => {
			    router.push({name: 'AdminAddBlog', query: { id: row.ID } });
			}
			
            // 删除公告
        	const handleDelete = _.debounce(async (row) => {
        	    if(!row['id']) return ElMessage.error('公告不存在');
                try {
                    smartSpeak('确定要删除这个公告吗');
                    await ElMessageBox.confirm(' 您确定要删除这个公告吗？', '删除确认', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }); 
                    await delbgsxapi({ ids: [row.ID] });
                    getData();;
                } catch (error) {
                    if (error === 'cancel') {
                        return;  // 用户点击了取消，不进行处理
                    }
                    console.error(' 删除失败:', error);
                    ElMessage.error(' 删除失败，请稍后再试');
                    smartSpeak('删除失败');
                }
        	}, 300);
    
            return {
                searchText,
                currentPage,
                pageSize,
                articles,
                total,
                formatDate,
                handleSearch,
                loadArticles,
                clearSearch,
                viewArticle,
                handleCreate,
                handlePageChange,
                handleEdit,
                handleDelete
            };
        },
        
        template: `
	<div class="container">
        <div style="display: flex; align-items: center;">
            <el-button type="primary" @click="handleCreate()">发布公告</el-button>
            <el-input style="width:500px;margin-left: 10px;" v-model="searchText" placeholder="输入关键词搜索" clearable @keyup.enter="handleSearch" @clear="handleSearch">
                <template #prefix>
                	<el-icon class="el-input__icon"><search /></el-icon>
                </template>
				<template #append>
                    <el-button @click="handleSearch">搜索</el-button>
                </template>
			</el-input>
        </div>

		<!-- 数据表格 -->
		<el-table class="mt-1" :data="articles" :row-key="(row) => row.ID" style="width: 100%" border stripe empty-text="暂无公告数据">
		    <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
			<el-table-column prop="Title" label="标题" min-width="300">
				<template #default="{ row }">
					<div class="title-wrapper">
						<el-link type="primary" @click="viewArticle(row.ID)">
							{{ row.Title }}
						</el-link>
						<el-tag v-if="row.IsRead === 0" type="danger" effect="dark" size="small" class="unread-badge">
							未读
						</el-tag>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="Photo" label="缩略图" width="120" align="center">
				<template #default="{ row }">
					<el-image style="width: 80px; height: 60px; border-radius: 4px" :src="row.Photo" :preview-src-list="[row.Photo]" fit="cover" v-if="row.Photo">
						<template #error>
							<div class="image-error">
								<el-icon>
									<Picture />
								</el-icon>
							</div>
						</template>
					</el-image>
					<el-icon v-else size="40">
						<Picture />
					</el-icon>
				</template>
			</el-table-column>
			
		    <el-table-column prop="Cjz" label="作者" width="150" align="center" />
			<el-table-column prop="IsRead" label="阅读量" width="100" align="center" />
			<el-table-column label="创建时间" width="180">
				<template #default="{ row }">{{ formatDate(row.CreatedAt) }}</template>
			</el-table-column>
            <el-table-column fixed="right" label="操作" :width="180">
                <template #default="scope">
                <el-button link type="success" @click="viewArticle(scope.row.ID)">查看</el-button>
                <el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button>
                <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
		</el-table>

		<!-- 分页 -->
		<div class="pagination">
			<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
				:page-sizes="[10, 20, 50, 100]" :background="true" layout="total, sizes, prev, pager, next"
				:total="total" @size-change="handlePageChange" @current-change="handlePageChange" />
		</div>

	</div>
        `
    }